const app = new Vue({
    el: "#app",
    data() {
        return {
            barbecue: [
                {
                    name: '烤鱿鱼串',
                    id: 1,
                    image: './images/img1.jpg',
                    price: 10,
                    count: 1
                },
                {
                    name: '烤羊肉串',
                    id: 2,
                    image: './images/img2.jpg',
                    price: 15,
                    count: 1
                },
                {
                    name: '烤韭菜',
                    id: 3,
                    image: './images/img3.jpg',
                    price: 3,
                    count: 1
                },
                {
                    name: '烤五花肉串',
                    id: 4,
                    image: './images/img4.jpg',
                    price: 13,
                    count: 1
                },
            ],
            softDrink: ['果汁橙', '芬达', '雪碧', '可乐', '健力宝', '王老吉', '加多宝', '燕京鲜啤', '纯生', '珠江零度', '菠萝啤'],
            checkList:[],

        }
    },
    methods: {
        decrement(index) {
            this.barbecue[index].count--
        },
        increment(index) {
            this.barbecue[index].count++
        },
        removeHandle(index) {
            this.barbecue.splice(index, 1)//移除对应的下标行
        },

        showPriceList(){
            let total = 0;
            this.checkList.forEach(item => {
                total += item.price * item.count
                console.log(item);
            });
            return total
        }
    },
    filters: {
        showPrice(price) {
            return '￥' + price.toFixed(2)
        }
    },
    computed: {
        totalPrice() {
           // 1.一般遍历写法
            let totalPrice = 0
            for (let i = 0; i < this.barbecue.length; i++) {
                totalPrice += this.barbecue[i].price * this.barbecue[i].count
            }
            return totalPrice
        
            // //2.for in 写法
            // let totalPrice = 0
            // for (let i in this.barbecue) {
            //     totalPrice += this.barbecue[i].price * this.barbecue[i].count
            // }
            // return totalPrice
            
            // //3.for of 写法
            // let totalPrice = 0
            // for (let item of this.barbecue) {
            //     totalPrice += item.price * item.count
            // }
            // return totalPrice

            //4.高阶函数reduce写法：
            // return this.barbecue.reduce(function(preValue, item){
            //     return preValue + item.price * item.count
            // },0)
        },
     
    },
  
});
